
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">    
    <meta name="format-detection" content="telephone=no, email=no">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="renderer" content="webkit">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta http-equiv="keywords" content="云净,透析单,网页透析" />
	<meta http-equiv="description" content="云净透析单" />
    <link href="http://192.168.1.115:8080/yunjingservice/image/yunjing/logo.ico" type="image/x-icon" rel="shortcut icon">
    <link rel="stylesheet" type="text/css" href="http://192.168.1.115:8080/yunjingservice/css/common/base.css" />
    <link rel="stylesheet" type="text/css" href="http://192.168.1.115:8080/yunjingservice/css/mtxform_grzx.css" />
    <title>云净</title>
    <style>
        /* 解决触摸延迟 */
        html {
            touch-action: manipulation;
        }
        a[title="站长统计"]{display: none;}
        #signature{color: red;background-color: #ffffff;}
        #signWrap{
        	position:fixed;
        	left:0;
        	top:0;
        	right:0;
        	bottom:0;
        	background-color:rgba(0,0,0,0.18);
        	padding-top:12vh;
        	justify-content:center;
        }
        #signWrap.flex{
        	display:flex;
        }
        #imageViewBox img{
        	width:50%;
        	height:auto;
        	border:1px solid #DDD;
        	border-radius:6px;
        	background:#bee8f2;
        }
        .upload_img_preview img{
        	width:80px;
        	height:80px;
        	margin:10px;
        }
        #loadingStatus{
        	background-color: rgb(92, 184, 92);
		    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.14902) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.14902) 50%, rgba(255, 255, 255, 0.14902) 75%, transparent 75%, transparent);
		    background-size: 40px 40px;
		    box-shadow: rgba(0, 0, 0, 0.14902) 0px -1px 0px 0px inset;
		    box-sizing: border-box;
		    color: rgb(255, 255, 255);
		    border-radius:10px;
        }
    </style>
</head>

<body>
	<div  id="mGrzxHeader">
		<div class="header-a">
			<img alt="" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1205805363,1282379730&fm=11&gp=0.jpg">
		</div>
		<div class="header-b">
			<span>田谷新</span>
		</div>
		<div class="header-c" id="imageViewBox">
			<span>设置您的电子签名.</span>
		</div>
		<div class="header-d">
			<span class="store">积分<span class="store-num">2</span>分</span>
		</div>
		<div class="header-e">
			<span class="sign-in-day">已签到<span class="day">6</span>天</span>
		</div>
	</div>
	<ul id="mGrzxItems">
		<li class="item" id="myShare">
			我的案例分享
		</li>
		<li class="item" id="myPatient">
			我的患者
		</li>
		<li class="item" id="mySst">
			我的肾世图
		</li>
	</ul>
	<div id="signWrap" class="none flex">
		
		<div id="signArea">
			<div class="title-a">
				<span>签&nbsp;名</span>
				<div id="closeSign"></div>
			</div>
			<div class="content-wrap">
				<div id="signature"> 
					
				</div> 
				<div style="text-align: center;position:relative;">
					<div id="loadingStatus" style="height:20px;position:absolute;left:0;top:-86px;width:0;">
						<span style="position:absolute;top:-30px;left:50%;transform: translate(-50%, 0); min-width:90px;height:20px;font-size:14px;color:#5FAEF0;"></span>
					</div>
			    	<button type="button" onclick="jSignature_img()" class="save-sign">保存</button>
			    	<button type="button" onclick="reset()" class="cancel-sign">取消</button>
			    	<!-- <button type="button" id="c" class="cancel-sign">取消</button> -->
			    </div>       
			    
			    <!-- <div id="image" style="margin: 20px"> </div>
			    <div id="img_src"></div> -->
			</div>
		    
		 </div>
	</div>
	<script type="text/javascript" src="http://192.168.1.115:8080/yunjingservice/js/jquery/jquery-1.9.1.min.js"></script>
	<script src="http://192.168.1.115:8080/yunjingservice/js/signature/jSignature.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../../js/upload/lib/plupload-2.1.2/js/plupload.full.min.js"></script>
    <script type="text/javascript" src="../../../js/upload/upload.js"></script>
    <script type="text/javascript" src="../../../js/layer/layer.js"></script>
	<script type="text/javascript">
        $(function () {
        	$.ajaxSetup({
				async:false
			});
		    window.canvasIsEmpty = "Y"//用于判断是否有手写签名，默认是空，无签名
            var sigdiv = $("#signature");
			sigdiv.jSignature('init',{height:'100%',width:'100%'});
            $("#closeSign").on("click",function(){
            	reset();
            	
            	$("#signWrap").removeClass("flex");
            });
            $("#imageViewBox").on("click",function(){
            	getOSSAuth();
            	 $("#loadingStatus").css({"width":"0"});//进度条置零
            	 $("#loadingStatus span").text("");//清除进度显示文字
            	$("#signWrap").addClass("flex");
            });
            
        });
        function reset() {
            var $sigdiv = $("#signature");
            $sigdiv.jSignature("reset");
            if(window.canvasIsEmpty === "Y"){$("#signWrap").removeClass("flex");}
            window.canvasIsEmpty = "Y";
        }
        function jSignature_img() {
        	if(window.canvasIsEmpty === "Y"){
        		layer.msg("请签名");
        		return false;
        	} 
            var $sigdiv = $("#signature");
            var datapair = $sigdiv.jSignature("getData", "image"); //设置输出的格式，具体可以参考官方文档
			console.log(datapair)
            var i = new Image();
            i.src = "data:" + datapair[0] + "," + datapair[1];
            console.log(i.src)
            i.crossOrigin="anonymous";
            $("#imageViewBox").empty();
            $(i).appendTo($("#imageViewBox")) // append the image (SVG) to DOM.
            /* reset();
            $("#imageViewBox").css({"height":"auto"})
            $("#signWrap").removeClass("flex"); */
            
		    //封装blob对象  
		    var blob = convertBase64UrlToBlob(i.src); 
		    console.log(blob)
            upload(blob)
        }
        
        function convertBase64UrlToBlob(urlData){
		    var bytes=window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte
		    //处理异常,将ascii码小于0的转换为大于0
		    var ab = new ArrayBuffer(bytes.length);
		    var ia = new Uint8Array(ab);
		    for (var i = 0; i < bytes.length; i++) {
		        ia[i] = bytes.charCodeAt(i);
		    }
		    return new Blob( [ab] , {type : 'image/png'});
		}


        
        
		
        function outputImage() {
            var $sigdiv = $("#signature");
            var datapair = $sigdiv.jSignature("getData", "image"); //设置输出的格式，具体可以参考官方文档
            var imagebase64 = datapair[1].replace(/\+/g, '%2B');

            $.ajax({
                type: "POST",
                url: "Default.aspx",
                data: "image=" + imagebase64,
                success: function (msg) {
                    var createImage = new Image();
                    createImage.src = msg;
                    $(createImage).appendTo($("#img_src"))
                }
            });
        }
        
        
       /* 图片上传 */ 
	   var hostUrl=window.location.protocol+"//"+window.location.host+"/yunjingservice/";    	 
	   var accessid='',policy='', Signature='', key='mtxform/20171221.png' ,host='',expire = 0,now = 0;
	   
	   // 可以判断当前expire是否超过了当前时间，如果超过了当前时间，就重新取一下，3s 做为缓冲
	   function getOSSAuth(){
	      now = Date.parse(new Date()) / 1000; 
	      if (expire < now + 3){
		       $.getJSON(hostUrl + "OSSAuth/mtxform_hzdetail.shtml",function(data){
		        console.dir(data);
		        accessid=data.accessid;
		        policy=data.policy;
		        signature=data.signature;
		        expire=data.expire;
		        host=data.host;
		      });
	       }
	   }
	   
	  function get_suffix(filename) {
	    pos = filename.lastIndexOf('.')
	    suffix = ''
	    if (pos != -1) {
	        suffix = filename.substring(pos)
	    }
	    return suffix;
	  }
	   
	   function upload(blob){
	     getOSSAuth();//获取授权
	     var request = new FormData(); 
		   request.append('OSSAccessKeyId', accessid);
	       request.append('policy', policy);
	       request.append('Signature',signature);
	       request.append('key',key);//+filename
	       request.append('success_action_status','200');//status头，如果不设置返回的是204
	       request.append('Access-Control-Allow-Origin','*');
	       request.append('Access-Control-Allow-Methods','GET, POST');
	       //request.append('file', $(".upload_input")[0].files[0]);
	       request.append("fileData", blob);//fileData为自定义 
	       request.append('file', blob);
	       request.append("imageName",blob);
	       $.ajax({
	           url: host,
	           data: request,
	           processData: false,
	           cache: false,
	           async: false,
	           contentType: false,
	           //关键是要设置contentType 为false，不然发出的请求头 没有boundary
	           type: "POST",
	           beforeSend:function(){
	             var width = 1;
	              timer = setInterval(function(){
	             	$("#loadingStatus").css({"width":width + "%"});
	             	$("#loadingStatus span").text("上传中"+width+"%")
	             	width++;
	             	if(width == 92){
	             		clearInterval(timer)
	             	}
	             },17)
	           },
	           success: function (data,textStatus, request) {
	             console.log(data)
	             if (request.status == '200') {
				     reset();
				     clearInterval(timer)
				     $("#loadingStatus").css({"width":"100%"});
			         $("#imageViewBox").css({"height":"auto"})
			         $("#signWrap").removeClass("flex");
				     layer.msg('上传头像成功！');
	             }
	           },
	           error: function (data,textStatus, request) {
	        	   layer.msg('上传失败，请刷新重试！');
	           },complete:function(){
	           }
	       });
	   }
   </script>
</body>

</html>